<template>
  <div class="comment">
    <p class="commenttitle">
      <span>评论</span>
      <span>({{datalength}})
      </span>
    </p>
    <div class="commentmyinfo">
        <img :src="myuser.user_img" v-if="myuser">
        <img src="@/assets/head.png" v-else>
        <input ref="Postipt" v-model="commentcontent" type="text" placeholder="说点什么吧">
        <button @click="commentpublish">发表</button>
    </div>
  </div>
</template>

<script>
export default {
  props:['datalength'],
  name: "comment",
  data(){
    return{
      myuser: null,
      commentcontent:''
    }
  },
  methods:{
    async myUserinfo(){
      const res = await this.$http.get('/user/'+localStorage.getItem('id'))
      this.myuser = res.data[0]
    },
    commentpublish(){
      if(this.myuser&& !localStorage.getItem('token')&&!localStorage.getItem('id')){
        this.$msg.fail('请先登录')
        return
      }
      this.$emit('postcomment',this.commentcontent)
      this.commentcontent = ''
    },
    focusinput(){
      this.$refs.Postipt.focus()
    }

  },
  created(){
    if(localStorage.getItem('token')) {
      this.myUserinfo()
    }
  }
}
</script>

<style scoped lang="less">
.comment{
    padding: 8.33vw 2.78vw 0 2.78vw;
  .commenttitle{
    span:nth-child(2){
      color: #aaa;
      margin-left: 2.78vw;
    }
  }
  .commentmyinfo{
    padding: 2.78vw 0;
    display: flex;
    img{
      height: 7.78vw;
      width: 7.78vw;
      border-radius: 50%;
    }
    input{
      outline: none;
      border: 0;
      background-color: #dcdee0;
      border-radius: 3.89vw;
      font-size: 3.33vw;
      padding: 0 5.56vw  0 4.17vw;
      margin-left: 2.78vw;
    }
    button{
      outline: none;
      border: 0;
      border-radius: 3.61vw;
      background-color: #ff9db5;
      color: white;
      font-size: 3.33vw;
      padding: 0 4.17vw;
      margin-left: 1.39vw;
    }
  }
}
</style>
